<template>
  <div class="user_login">
    <div class="item" :class="{readonly:disabled.unit}">
      <span class="label">单位</span>
      <select-tree v-model="value.unit"
                   class="select"
                   id="unit"
                   :tree-data="userTree"
                   :field="unitField">
      </select-tree>
    </div>
    <div class="item" :class="{readonly:disabled.username}">
      <span class="label">用户名</span>
      <input v-model="value.username" type="text">
    </div>
    <div class="item" :class="{readonly:disabled.password}">
      <span class="label">密码</span>
      <input v-model="value.password" v-focus="isFocus" type="password" @keyup.enter="$emit('confirm')">
    </div>
    <div class="btn_box">
      <el-button size="mini" plain type="primary" @click="$emit('cancel')" v-if="showCancel">取消</el-button>
      <el-button size="mini" type="primary" @click="$emit('confirm')">确认</el-button>
    </div>
  </div>
</template>

<script>
import SelectTree from "@/components/SelectTree";
import {mapState} from 'vuex'

const {util: {isArray}} = require('../util')

export default {
  components: {SelectTree},
  name: 'UserLogin',
  data() {
    return {
      unitField: {
        id: 'DWBM',
        pid: 'FDWBM',
        label: 'DWMC'
      },
      disabled: {
        unit: false,
        username: false,
        password: false
      },
      isFocus: false
    }
  },
  computed: {
    ...mapState({
      userTree: state => state.common.userTree
    })
  },
  created() {
    if ((typeof this.disable) === 'boolean') {
      this.disabled.unit = this.disable
      this.disabled.username = this.disable
      this.disabled.password = this.disable
    } else if (isArray(this.disable)) {
      this.disabled.unit = this.disable[0]
      this.disabled.username = this.disable[1]
      this.disabled.password = this.disable[2]
    }
    this.isFocus = this.disabled.unit && this.disabled.username && !this.disabled.password
  },
  mounted() {
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          unit: {
            DWBM: '',
            DWMC: ''
          },
          username: '',
          password: ''
        }
      }
    },
    disable: {},
    showCancel: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="scss">
.user_login {
  .item {
    height: 30px;
    /*overflow: hidden;*/
    margin-top: 20px;

    .label {
      display: inline-block;
      font-size: 16px;
      width: 60px;
      height: 100%;
      line-height: 30px;
      text-align: justify;
      margin-right: 10px;

      &:after {
        display: inline-block;
        width: 100%;
        content: ' ';
      }
    }

    & > input {
      height: 100%;
      border: solid 1px;
      width: calc(100% - 60px - 10px);
      padding: 0 5px;
    }

    .select {
      height: 100%;
      width: calc(100% - 60px - 10px);
      display: inline-block;
      font-size: 16px;
      border: 1px solid #ccc;
      padding: 0 5px;
    }

    &.readonly {
      & > input {
        pointer-events: none;
        background-color: #f5f7fa;
        border: #e4e7ed 1px solid !important;
        color: #c0c4cf;
      }

      .select {
        pointer-events: none;
        background-color: #f5f7fa;
        border: #e4e7ed 1px solid !important;
        color: #c0c4cf;
      }
    }
  }

  .btn_box {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
